<template>
  <el-container class="home-container">
    <!--头部区域-->
    <el-header style="height:40px; width: 100%; padding-right: 0">
      <Header/>
    </el-header>

    <!--主体区域-->
    <el-container class="container">
      <!--主体区域-->
      <el-main style="height: 100%">
        <div class="backgroundImg"></div>
        <transition :name="transitionName">
          <keep-alive>
            <router-view class="router-view"></router-view>
          </keep-alive>
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import Header from "./Header"
import CacheUtil from "@/utils/CacheUtil";

export default {
  components: {
    Header
  },
  watch: {
    '$route'(to, from) {
      // console.log("r", to, from)
      if (to.meta.level >= from.meta.level) {
        this.transitionName = 'slide-forward';
      } else {
        this.transitionName = 'slide-back'
      }
    }
  },
  data() {
    return {
      transitionName: '',
      // nowRoute: 0,
    }
  },
  created() {
    // console.log(this.$route)
    // this.$router.push("index");
  },
  methods: {}
}
</script>
<style lang="less" scoped>

.slide-forward-enter {
  transform: translate(100%);
}

.slide-forward-enter-active {
  transition: all 0.5s ease-in-out;
}

.slide-forward-leave-active {
  transform: translate(-100%);
  transition: all 0.5s ease-in-out;
}

.slide-back-enter {
  transform: translate(-100%);
}

.slide-back-enter-active {
  transition: all 0.5s ease-in-out;
}

.slide-back-leave-active {
  transform: translate(100%);
  transition: all 0.5s ease-in-out;
}


.home-container {
  height: 100%;
  width: 100%;
  margin: auto;

  .el-header {
    position: fixed;
    background-color: #3a7e59 !important;
    z-index: 10;
  }

  .container {
    width: 100%;

    .el-main {
      position: relative;
      height: 100%;
      width: 100%;

      .router-view {
        width: 80%;
        padding-top: 50px;
        //padding: 50px 100px 100px;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto auto 50px;
      }

      .backgroundImg {
        width: 100%;
        height: 100%;
        background-color: #EAEDF1;
        position: fixed;
      }
    }
  }

}
</style>
